<template>
  <div>
    <el-card>
      <k-form label-width="100px" :data="form" :rules="rules" @submit="onSubmit">
        <k-form-item label="站点标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </k-form-item>

        <k-form-item label="站点域名" style="width: 450px" prop="domain">
          <el-input v-model="form.domain">
            <template slot="prepend">http://</template>
          </el-input>
        </k-form-item>

        <k-form-item label="ICP备案号">
          <el-input></el-input>
        </k-form-item>

        <k-form-item label="站点关键字">
          <el-input></el-input>

          <div class="ke__tip">
            每个关键字使用“,”分隔，建议不要超过128
          </div>
        </k-form-item>

        <k-form-item label="站点介绍">
          <el-input type="textarea"></el-input>

          <div class="ke__tip">
            站点的简介，建议在255字内
          </div>
        </k-form-item>

        <k-form-item>
          <el-button type="primary" native-type="submit">提交保存</el-button>
        </k-form-item>
      </k-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'system',
  data () {
    return {
      form: {},
      rules: {
        title: [
          { required: true, message: '请输入站点标题' },
          { max: 128, message: '站点标题限制长度：128' }
        ],
        domain: [
          { required: true, message: '请输入站点域名' },
          { max: 32, message: '域名格式错误' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit')
    }
  }
}
</script>

<style scoped>

</style>
